<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="echarts">
    <div class="box">
      <div class="temperature">
        <dv-border-box12>
          <h4>日产蛋率</h4>
          <Humidness></Humidness>
        </dv-border-box12>
      </div>
      <div class="humidness">
        <dv-border-box12>
          <h4>日料蛋比</h4>
          <Temperature></Temperature>
        </dv-border-box12>
      </div>
      <div class="dioxide">
        <dv-border-box12>
          <h4>日造蛋成本</h4>
          <Dioxide></Dioxide>
        </dv-border-box12>
      </div>
      <div class="pressure">
        <dv-border-box12>
          <h4>日死淘率</h4>
          <Pressure></Pressure>
        </dv-border-box12>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Temperature from '../Henhouse/Echarts/EchartsLeft/temperature.vue'
import Humidness from './Echarts/EchartsLeft/Layeggs.vue'
import Dioxide from '../Henhouse/Echarts/EchartsLeft/Dioxide.vue'
import Pressure from '../Henhouse/Echarts/EchartsLeft/Pressure.vue'


</script>

<style scoped>
.echarts {
  width: 95%;
  height: 98%;
}

.box {
  width: 90%;
  height: 90%;
}

.temperature {
  width: 22vw;
  height: 20vh;
  margin-left: 0.5vw;
}

.temperature h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.humidness {
  width: 22vw;
  height: 20vh;
  margin-left: 0.5vw;
  margin-top: 2vh;
}

.humidness h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.dioxide {
  width: 22vw;
  height: 20vh;
  margin-left: 0.5vw;
  margin-top: 2vh;
}

.dioxide h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.pressure {
  width: 22vw;
  height: 20vh;
  margin-left: 0.5vw;
  margin-top: 2vh;
}

.pressure h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}
</style>
